<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			ul,
			li {
				list-style: none;
			}

			.wrap {
				width: 300px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}
			.title{
				width: 200px;
				height: 50px;
				margin: 0 auto;
				background-color: orange;
				font-size: 40px;
				color: white;
				border-radius: 50px;
				text-align: center;
				line-height: 50px;
			}
			.list{
				position: absolute;
				top: 35px;
				left: 10px;
				width: 200px;
				height: 250px;
				display: none;
			}
			.list li{
				width: 200px;
				height: 50px;
				text-align: center;
				background-color: skyblue;
				color: white;
				line-height: 50px;
				font-size: 30px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
				<div class="title">菜单</div>
				<ul class="list">
					<li>微博</li>
					<li>图片</li>
					<li>博客</li>
					<li>视频</li>
					<li>更多>></li>
				</ul>
		</div>
		<script>
		var flag =true;
		var titEle = document.getElementsByTagName("title")[0].innerHTML;
		document.getElementsByClassName("title")[0].onclick = function() {
			flag =!flag;
			if(flag){
				document.getElementsByClassName("list")[0].style.display = "none";
				document.getElementsByClassName("title")[0].innerHTML = ;
			}else{
				document.getElementsByClassName("list")[0].style.display = "block";
			}
			
			}
			var  arr = document.getElementsByTagName("li");
			for(var i = 0;i<arr.length;i++){
				arr[i].index = i;
				arr[i].onclick = function() {
					
					
						document.getElementsByClassName("title")[0].innerHTML = arr[this.index].innerHTML;
						document.getElementsByClassName("list")[0].style.display = "none";
						// flag =true;
					}
				}
				// 接收i值方法1:利用let块级作用域
				//方法2利用函数作用域
				//方法3this
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			/* document.getElementsByTagName("li")[1].onclick = function() {
				num = 1;
				console.log("被点击了!");
				console.log(num);
				if(num ==1){
					console.log(num);
					document.getElementsByClassName("title")[0].innerHTML = document.getElementsByTagName("li")[1].innerHTML;
				}
			}
			document.getElementsByTagName("li")[2].onclick = function() {
				num = 1;
				console.log("被点击了!");
				console.log(num);
				if(num ==1){
					console.log(num);
					document.getElementsByClassName("title")[0].innerHTML = document.getElementsByTagName("li")[2].innerHTML;
				}
			}
			document.getElementsByTagName("li")[3].onclick = function() {
				num = 1;
				console.log("被点击了!");
				console.log(num);
				if(num ==1){
					console.log(num);
					document.getElementsByClassName("title")[0].innerHTML = document.getElementsByTagName("li")[3].innerHTML;
				}
			}
			document.getElementsByTagName("li")[4].onclick = function() {
				num = 1;
				console.log("被点击了!");
				console.log(num);
				if(num ==1){
					console.log(num);
					document.getElementsByClassName("title")[0].innerHTML = document.getElementsByTagName("li")[4].innerHTML;
				}
			} */
			
		/* document.getElementsByClassName("wrap")[0].onmouseout = function() {
			document.getElementsByClassName("list")[0].style.display = "none";
			
		} */


		</script>
	</body>
</html>
